<template>
  <div>
    <div class="vc-text-center vc-font-semibold vc-text-lg vc-p-2 vc-border-b vc-border-gray-300">{{ title }}</div>
    <div class="vc-p-2 vc-pb-0 vc-flex vc-flex-row vc-flex-wrap vc-items-center">
      <div v-for="el in data" :key="el.name" class="vc-mb-4" :class="{ 'vc-w-full': !el.inline, 'vc-mr-2': el.inline }">
        <div class="vc-font-semibold vc-mb-2"> {{ el.name }}</div>
        <!-- <FontAttr v-if="el.fontStyle" v-model:value="el.fontStyle" /> -->
        <div v-if="el.value !== undefined">
          <span class="vc-text-gray-600" :class="[el.slotName ? 'vc-inline-block vc-w-12' : '']">
            {{ el.value }}{{ el.unit }}
          </span>
          <slot v-if="el.slotName" :name="el.slotName" />
        </div>
        <slot v-else-if="el.slotName" :name="el.slotName" />
      </div>
    </div>
    <slot />
  </div>
</template>
<script setup lang="ts">
import { AttrItem } from "./types";

const props = defineProps<{
  title: string;
  data: AttrItem[];
}>();
</script>
